<template>
  <div v-show="$store.state.design.whatTool===5" class="toolbox">
    <div v-for="item in commonImages" :key="item.name" class="one-picture-box">
      <img class="one-picture" :src="item.thumb" alt="img" style="display:none;" @load="loadingImage">
      <img class="one-picture" src="/static/image/loading2.gif" alt="img">
      <div class="one-picture-shade">
        <span class="addbtn" @click="addCommonImage(item.href)">add</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      page: 1,
      commonImages: [],
      total: 0
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    loadingImage(e) {
      e.target.style.display = 'block';
      $(e.target)
        .siblings('.one-picture')
        .remove();
    },
    addCommonImage(src) {
      var myuri = encodeURIComponent(JSON.stringify({ url: src, color: '' }));
      svgTool.addImg(src, 'common', myuri);
    },
    getdata() {
      // $.ajax({
      //   context: this,
      //   url: resourceUrl.getCommonImages,
      //   data: { page: this.page },
      //   success: function(res) {
      //     this.total = res.total;
      //     var i = 0,
      //       len = res.data.length;
      //     for (i; i < len; i++) {
      //       this.commonImages.push(res.data[i]);
      //     }
      //     if (this.total > this.page * 18) {
      //       this.page++;
      //       this.getdata();
      //     }
      //   }
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
.toolbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: auto;
}
.one-picture-shade{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.one-picture-box{
  float: left;
  margin: 17px 0 0 17px;
  width: 88px;
  height: 80px;
  border: 1px solid rgb(240, 236, 238);
  position: relative;
  cursor: pointer;
}

.one-picture-box:hover .one-picture-shade{
  display: block;
}
.addbtn{
  position: absolute;
  width: 50px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  text-align: center;
  background-color: #339;
}
.one-picture{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  max-width: 96%;
  max-height: 96%;
}
</style>
